import React, { Component } from 'react'
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import { InputItem, Toast, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import {actionCreators} from '../store'
import { AddressSetPage } from '../style'
import classnames from "classnames";
let inputPattern = '';
class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: [{
        value: "1",
        lable: "家"
      }, {
        value: "2",
        lable: "公司"
      }, {
        value: "3",
        lable: "默认"
      }, {
        value: "4",
        lable: "其他"
      }],
      addressInfo: {
        id: "",
        name: "",
        phone: "",
        address: "",
        tag: "0",//1家，2公司，3默认，4其他 0空
      }
    }
  }
  submit = () => {
    this.props.form.validateFields((error, value) => {
      if (!error) {
        this.changeLocal(value)
      } else {
        if (error['name']) {
          Toast.info('请输入用户名', 2)
        } else if (error['phone']) {
          Toast.info('请输入正确的手机', 2)
        } else {
          Toast.info('输入错误', 2)
        }
      }
    })
  }
  async changeLocal(val) {
    let id = this.props.match.params.id;
    if (id==null) {
      await this.props.addAddress (val)
      Toast.info('新增地址成功', 2);
    } else {
      await this.props.editAddress ({...val,id})
      Toast.info('修改地址成功', 2);
    }
    setTimeout(() => {
      this.props.history.push("/address");
    }, 2000)
  }
  settag(i) {
    let { addressInfo } = this.state;
    let adsInfo = { ...addressInfo }
    adsInfo.tag = i;
    this.setState({ addressInfo: adsInfo })
  }
  componentDidMount() {
    let i = this.props.match.params.id;
    if (i != null) {
      let {   addressList } = this.props;
      const addressInfo = { ...addressList[i] };
      this.setState({ addressInfo: addressInfo })
    }
  }
  render() {
    let { tags, addressInfo } = this.state;
    const { getFieldProps } = this.props.form;
    const { name, phone, address, tag } = addressInfo;
    return (
      <AddressSetPage>
        <InputItem
          {...getFieldProps('name', {
            rules: [{ required: true, pattern: inputPattern }],
            initialValue: name
          })}
          placeholder="用户名"
          ref={el => (this.inputRef = el)}
        />
        <InputItem
          {...getFieldProps('phone', {
            rules: [{ required: true, pattern: inputPattern }],
            initialValue: phone
          })}
          placeholder="手机号"
          ref={el => (this.inputRef = el)}
        />
        <InputItem
          {...getFieldProps('address', {
            rules: [{ required: true, pattern: inputPattern }],
            initialValue: address
          })}
          placeholder="地址"
          ref={el => (this.inputRef = el)}
        />
        <div
          className='item'
          {...getFieldProps('tag', {
            rules: [{ required: true }],
            initialValue: tag
          })}
        >
          {tags.map((i) => {
            return <span className={classnames({
              "tag": true,
              'active': tag !== i.value ? false : true
            })} key={i.value} onClick={() => this.settag(i.value)}>{i.lable}</span>
          })}
        </div>
        <Button type="primary" onClick={this.submit} style={{ 'margin': "30px 0" }}>  确认修改 </Button>
      </AddressSetPage>
    )
  }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
  return {
    addressList: state.getIn(["shopaddress", 'addressList']).toJS(),
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addAddress (data) {
      dispatch(actionCreators.addAdressList(data))
    },
    editAddress(data) {
      dispatch(actionCreators.editAdressList(data))
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(createForm()(LoginForm))
